import React, {useState, useMemo} from 'react'

function ChildComponent({name, children}) {

  function changeXiaohong() {
    console.log('她来了，她来了，小红向我们走来了')
    return name + '，小红向我们走来了'
  }

  // 只有在name发生变化时，才执行changeXiaohong()，避免无意义的重复执行产生的性能问题
  const actionXiaohong = useMemo(()=> changeXiaohong(), [name])

  return (
    <div>
      <div>{actionXiaohong}</div>
      <div>{children}</div>
    </div>
  )
}

export default function () {
  const [xiaohong, setXiaohong] = useState('小红在待客状态')
  const [zhiling, setZhiling] = useState('志玲在待客状态')

  return (
    <>
      <button onClick={()=>{setXiaohong(+new Date())}}>小红</button>
      <button onClick={()=>{setZhiling(+new Date() + '，志玲向我们走来')}}>志玲</button>
      <ChildComponent name={xiaohong}>{zhiling}</ChildComponent>
    </>
  )
}
